<template>
    <el-container class="is-vertical">
        <Header v-bind:message_id="id"></Header>
        <el-container>        
            <el-main :style="{minHeight: innerHeight + 'px'}">
                <router-view v-on:call="pageData"></router-view>
            </el-main>
        </el-container>       
        <Footer></Footer>
    </el-container>
</template>

<script type="text/ecmascript-6">
    import Header from '../layouts/Header.vue';
    import Footer from '../layouts/Footer.vue';
    export default{
        components: {
            Header,
            Footer
        },
        data() {
            return {
                innerHeight: 0,
                id:''
            }
        },
        mounted () {
            this.innerHeight = window.innerHeight - 60 - 20;
        },
        methods: {
            pageData (data) {
                    this.id = data
            }
        }
    }
</script>
<style>
    body{
        background: #f2f7fa;
    }
    .el-main{
        margin: 10px;
        /*
        padding: 0;
        background: #fff;
        */
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        -ms-transition: all 0.3s;
        -o-transition: all 0.3s;
        transition: all 0.3s;
        border-radius: 4px;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
    }
    .el-container{
        min-width:960px;
        background-color: #E4E7ED;
    }
    .el-button--primary {
        background-color: #437cff;
        border-color: #437cff;
    }
    .default-scrollbar {
        width: 100%;
    }
    .wdh-table {
        margin: 10px;
        font-size: 13px;
    }
    .wdh-table td {
        padding: 2px 0;
    }
    .wdh-table .no-operation td {
        padding: 8px 0;
    }
    .wdh-table th {
        background-color: #f4f4f4;
        padding: 8px 0;
    }

    .wdh-search {
        padding:10px;
        margin: 10px 10px 0;
    }
    .wdh-search .wdh-search-button {
        padding-left: 4px;
    }

    .wdh-edit{
        margin: 10px;
    }
    .wdh-edit .wdh-edit-content {
        background:#f2f7fa;
        padding:20px;
    }
    .wdh-edit .wdh-edit-content .wdh-help {
        display: inline-block;
        color: rgb(168, 170, 173);
    }
    .wdh-edit .wdh-edit-button {
        text-align: center;
        margin:20px 0;
    }
    .el-input__inner,.el-cascader{
        height: 36px;
        line-height: 34px;
    }
    .el-input,.el-select-dropdown__item{
        font-size: 13px;
    }
    .el-button {
        height: 36px;
        box-sizing: border-box;
        font-size: 13px;
    }
    .wdh-search .el-button {
        padding: 11px 20px;
    }
    .wdh-inputp{
        padding-left: 2.5px !important;
        padding-right: 2.5px!important;
    }
    .wdh-button{
        width: 55px !important;
    }
    .wdh-but-fixed{
        position: fixed;
        bottom: 0;
        width: calc(100% - 90px);
        right: 10px;
        box-sizing: border-box;
        background: #fff;
        z-index: 999;
        padding: 5px 0;
    }
    .green {
        color: #339933;
    }
</style>
